<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>员工分析</el-breadcrumb-item>
        </el-breadcrumb>


        <div style="display: flex; margin-top: 20px; border-bottom: 1px solid rgb(215,215,215);">
            <!-- 下拉框 -->
            <el-select v-model="deptId" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>

            <!-- 选项卡 -->
            <div class="tabHeader" style="display: flex;">
                <div @click="tabs(0)" :class="tab == '0'?'blue':''">客户概况</div>
<!--                <div @click="tabs(1)" :class="tab == '1'?'blue':''">订单数据</div>-->
                <div @click="tabs(2)" :class="tab == '2'?'blue':''">沟通跟进</div>
                <div @click="tabs(3)" :class="tab == '3'?'blue':''">员工报表</div>
            </div>
        </div>

        <!-- 选项卡体 -->
        <div>
            <div v-if="tab == '0'">
                <AnalyzeList :deptId="deptId"></AnalyzeList>
            </div>
            <div v-if="tab == '1'">
                <AnalyzeOrder></AnalyzeOrder>
            </div>
            <div v-if="tab == '2'">
                <AnalyzeFollow></AnalyzeFollow>
            </div>
            <div v-if="tab == '3'">
                <AnalyzeEmp></AnalyzeEmp>
            </div>
        </div>


    </div>
</template>

<script>
    import AnalyzeList from '@/views/security/analyze/list'
    import AnalyzeEmp from '@/views/security/analyze/emp'
    import AnalyzeOrder from '@/views/security/analyze/order'
    import AnalyzeFollow from '@/views/security/analyze/follow'

    import ElementUI from 'element-ui'
    // 修改 el-dialog 默认点击遮照为不关闭
    ElementUI.Dialog.props.closeOnClickModal.default = false;

    export default {
        data() {
            return {
                // 下拉值
                deptId: '',
                // 下拉选项
                options: [],
                // 选项卡 0-3
                tab: '0',
                data:''
            }
        },
        mounted(){
            this.queryDataHandle()
        },
        methods: {
            queryDataHandle() {
                let that = this
                this.$request("/api/emp/getDeptList/1_0", {}, "POST").then((data) => {
                    let list = data.rows
                    for(let i=0 ;i<list.length; i++){
                        let item = list[i]
                        that.options.push({
                            label: item.deptName,
                            value: item.deptId
                        })
                    }
                })
            },
            tabs(index) {
                this.deptId = this.deptId
                this.tab = index;
            },
        },

        // 注册组件
        components: {
            AnalyzeList,
            AnalyzeEmp,
            AnalyzeOrder,
            AnalyzeFollow
        },
    }
</script>

<style scoped>
    .tabHeader {
        margin-left: 25px;
    }

    .tabHeader > div {
        padding: 10px 15px;
    }

    .blue {
        font-size: 16px;
        color: rgb(52, 112, 255);
        font-weight: 600;
    }
</style>
